{% extends 'Z/base.html' %}
{% load common_extras %}
{% load static %}

{% block title %}
    chuangzuo
{% endblock %}

{% block header %}
    {% include 'Z/header.html' %}
{% endblock %}

{% block main %}
    {% if articles %}
        <ul class="nav">
            {% for article in pages %}
                {% if forloop.first %}
                    <div class="bottom-info">---</div>
                {% endif %}

                <li>
                    <a href="/Z/article/{{ article.id }}">
                        <div class="left">
                            <h4>{{ forloop.counter }}、{{ article.title }}</h4>
                            <p>{{ article.desc }}</p>
                            <p class="time-info">发布时间:{{ article.creat_time|time_since }}</p>
                        </div>
                        <div class="right">
                            <img src="/static/media/{{ article.cover }}/" alt="">
                        </div>
                    </a>
                    <div class="func">
                        <a href="/Z/article/update/{{ article.id }}">修改</a>
                        <a href="/Z/article/delete/{{ article.id }}">删除</a>
                    </div>
                </li>
            {% endfor %}
        </ul>

        {# 分页代码：放在文章列表下方，有数据时也能显示 #}
        <div class="bottom-info">
            {% if pages.has_previous %}
                {# 修正变量名：previous_page_number #}
                <a href="{% url 'ArticleUser' %}?page={{ pages.previous_page_number }}">上一页</a>
            {% endif %}

            {# 循环所有页码，生成完整链接（包括当前页和其他页） #}
            {% for page in pages.paginator.page_range %}
                {% if page == pages.number %}
                    {# 当前页：特殊样式 #}
                    <a href="{% url 'ArticleUser' %}?page={{ page }}" style="border-bottom: 2px solid cadetblue">{{ page }}</a>
                {% else %}
                    {# 其他页：普通链接 #}
                    <a href="{% url 'ArticleUser' %}?page={{ page }}">{{ page }}</a>
                {% endif %}
            {% endfor %}

            {% if pages.has_next %}
                <a href="{% url 'ArticleUser' %}?page={{ pages.next_page_number }}">下一页</a>
            {% endif %}

            {% if not pages.has_next and pages.paginator.num_pages > 0 %}
                <p>已经是最后一页啦o(>﹏<)o！！！</p>
            {% endif %}
        </div>

    {% else %}
        {# 没有文章数据时的提示 #}
        <div class="bottom-info">
            <p>暂无文章数据，请先发布文章~</p>
        </div>
    {% endif %}
{% endblock %}

{% block link %}
    <link rel="stylesheet" href="{% static 'css/Z/nav.css' %}">
{% endblock %}